<template>
    <div>
      <div v-if="total == 0 && isLoad" class="d-flex justify-center align-center">
        <div>
          <b-alert class="ma-5" dense outlined type="error">抱歉，你搜索的文章标题不存在！</b-alert>
        </div>
      </div>
      <b-col>
        <b-card
          class="ma-3"
          b-for="item in artList"
          :key="item.id"
          link
          @click="$router.push(`/article/detail/${item.ID}`)"
        >
          <b-row no-gutters class="d-flex align-center">
            <b-col class="d-flex justify-center align-center ma-3" cols="1">
              <b-img max-height="100" max-width="100" :src="item.img"></b-img>
            </b-col>
            <b-col>
              <b-card-title>
                <b-chip
                  color="green darken-2"
                  outlined
                  label
                  class="mr-3 white--text"
                >{{ item.Category.name }}</b-chip>
                <div>{{ item.title }}</div>
              </b-card-title>
              <b-card-subtitle class="mt-1" b-text="item.desc"></b-card-subtitle>
              <b-divider class="mx-4"></b-divider>
              <b-card-text class="d-flex align-center">
                <div class="d-flex align-center">
                  <b-icon class="mr-1" small>{{ 'mdi-calendar-month' }}</b-icon>
                  <span>{{ item.CreatedAt | dateformat('YYYY-MM-DD HH:MM') }}</span>
                </div>
                <div class="mx-4 d-flex align-center">
                  <b-icon class="mr-1" small>{{ 'mdi-comment' }}</b-icon>
                  <span>{{ item.comment_count }}</span>
                </div>
                <div class="mx-1 d-flex align-center">
                  <b-icon class="mr-1" small>{{ 'mdi-eye' }}</b-icon>
                  <span>{{ item.read_count }}</span>
                </div>
              </b-card-text>
            </b-col>
          </b-row>
        </b-card>
        <div class="text-center">
          <b-pagination
            total-visible="5"
            v-model="queryParam.pagenum"
            :length="Math.ceil(total / queryParam.pagesize)"
            @input="getArtList()"
          ></b-pagination>
        </div>
      </b-col>
    </div>
</template>
  
  
<script>
import requestService from '@/service/requestService'

export default {
    props: ['title'],
    data() {
      return {
        artList: [],
        queryParam: {
          pagesize: 5,
          pagenum: 1
        },
        total: 0,
        isLoad: true,
      }
    },
    mounted() {
      console.log("open the web")
      this.getArtList()
    },
    methods: {
      // 获取文章列表
      getArtList() {
        console.log(this.$store.state.searchTitle)
        //requestService.post('viewArticle')
        /*const { data: res } = await this.$http.get('article',)
          {
            params: {
              title: this.title,
              pagesize: this.queryParam.pagesize,
              pagenum: this.queryParam.pagenum
            }
          }
        )
        this.artList = res.data
        this.total = res.total
        this.isLoad = true
      }*/
    }
  }
}
</script>
<style lang="">
</style>